<template>
  <div class="body">
    <div class="body_left">
      <div
        v-for="(item, index) in bodyLeft"
        :key="index"
        class="item"
        :class="{ activeItem: routerPath.match(item.path) }"
        v-show="checkMenuPermission(item.id)"
      >
        <div
          @click="go(item.path)"
          style="padding-left: 22px; height: 50px"
        >
          <div style="display: inline-block">
            <Icon
              v-if="routerPath.match(item.path)"
              :name="item.icon"
              font-size="20"
              color="#497FA3"
            />
            <Icon
              v-else
              :name="item.icon"
              font-size="20"
              color="#4C565C"
            />
          </div>
          <div
            style="display: inline-block; margin-left: 12px"
          >
            {{ item.title }}
          </div>
          <div
            v-if="item.children"
            style="
              display: inline-block;
              float: right;
              margin-right: 20px;
            "
          >
            <i
              class="el-icon-arrow-up"
              v-if="childrenShowMap[item.path]"
            ></i>
            <i class="el-icon-arrow-down" v-else></i>
          </div>
        </div>
        <div
          v-if="item.children && childrenShowMap[item.path]"
          style="padding-left: 0"
        >
          <div
            v-for="(items, indexs) in item.children"
            :key="indexs"
            style="padding-left: 50px"
            :class="{
              activeItem: routerPath.match(items.path)
            }"
            @click="goTo(items.path)"
          >
            <div style="display: inline-block">
              <Icon
                v-if="routerPath.match(items.path)"
                :name="items.icon"
                font-size="20"
                color="#497FA3"
              />
              <Icon
                v-else
                :name="items.icon"
                font-size="20"
                color="#4C565C"
              />
            </div>
            <div
              style="
                display: inline-block;
                margin-left: 12px;
              "
            >
              {{ items.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="body_right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/icon'
import { checkMenuById } from '@/utils/menu/menu'

export default {
  name: 'index',
  components: {
    Icon
  },
  data() {
    return {
      bodyLeft: [
        {
          path: '/mochaITOM/userManagement',
          title: '用户管理',
          icon: 'yonghuguanli',
          id: 441
        },
        {
          path: '/mochaITOM/roleManagement',
          title: '角色管理',
          icon: 'jiaoseguanli',
          id: 442
        },
        {
          path: '/mochaITOM/deptManagement',
          title: '部门管理',
          icon: 'bumenguanli',
          id: 443
        },
        {
          path: 'shujuguanli',
          title: '数据管理',
          icon: 'shujuguanli',
          id: 444,
          children: [
            {
              path: '/mochaITOM/mapManagement',
              title: '底图资源管理',
              icon: 'baseMap',
              id: 4441
            },
            {
              path: '/mochaITOM/catalogueManagement',
              title: '数据目录管理',
              icon: 'shujumuluguanli',
              id: 4442
            },
            {
              path: '/mochaITOM/assetsManagement',
              title: '数据资产管理',
              icon: 'shujuzichan',
              id: 4443
            }
          ]
        },
        {
          path: 'pingbanguanli',
          title: '平板管理',
          icon: 'shujuguanli',
          id: 446,
          children: [
            {
              path: '/mochaITOM/padManagement/basemap',
              title: '底图资源管理',
              icon: 'baseMap',
              id: 4461
            },
            {
              path: '/mochaITOM/padManagement/catalog',
              title: '数据目录管理',
              icon: 'shujumuluguanli',
              id: 4462
            },
            {
              path: '/mochaITOM/padManagement/appManagement',
              title: 'app管理',
              icon: 'application',
              id: 4463
            }
          ]
        },
        {
          path: 'rizhi',
          title: '日志管理',
          icon: 'rizhiguanli',
          id: 445,
          children: [
            {
              path: '/mochaITOM/userRecord',
              title: '用户日志',
              icon: 'yonghudenglu'
            }
            // {
            //   path: '/mochaITOM/catalogueRecord',
            //   title: '数据访问日志',
            //   icon: 'shujufangwen'
            // }
          ]
        }
      ],
      // chidrenShow: false,
      // chidrenShowTwo: false,
      childrenShowMap: {
        shujuguanli: false,
        pingbanguanli: false,
        rizhi: false
      }
    }
  },
  computed: {
    routerPath() {
      return this.$route.path
    }
  },
  methods: {
    // 路由跳转
    go(path) {
      if (path.indexOf('/mochaITOM') > -1) {
        this.$router.push(path)
      } else {
        Object.keys(this.childrenShowMap).forEach((key) => {
          this.childrenShowMap[key] =
            key === path
              ? !this.childrenShowMap[key]
              : false
        })
      }
    },
    goTo(path) {
      this.$router.push(path)
    },
    checkMenuPermission(id) {
      return checkMenuById(id)
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  color: #000;
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;

  &_left {
    width: 296px;
    height: 100%;

    .item {
      width: 100%;
      height: auto;
      text-align: left;
      // padding-left: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4c565c;
      line-height: 50px;

      :hover {
        cursor: pointer;
      }
    }

    .activeItem {
      //background: red;
      background: rgba(234, 245, 253, 1);
      border-right: 3px solid #4a80a3;
      color: #497fa3;
      //color: #EAF5FD;
    }
  }

  &_right {
    display: flex;
    width: calc(100% - 297px);
    height: 100%;
    background: #eff3f9;
  }
}
</style>
